<template>
  <!-- 页头 -->
  <van-nav-bar title="领取结果" class="nav-var-header" left-arrow/>
  <div class="act-result-con">
    <div class="header">
      <van-image class="result-img" :src="getSuccess"/>
      <p class="get-success">领取成功</p>
    </div>
    <div class="info-card">
      <div class="table">
        <div class="table-col">
          <p class="flex-l">商品名称</p>
          <p class="info">{{ orderDetail.value.sku_name }}</p>
        </div>
        <div class="table-col">
          <p class="flex-l">领取时间</p>
          <p class="info">{{ orderDetail.value.obtain_time }}</p>
        </div>
        <div class="table-col">
          <p class="flex-l">订单号</p>
          <p class="info">{{ orderDetail.value.order_no }}</p>
        </div>
      </div>
    </div>
    <van-button size="large" color="#F14131" class="go-pay">去支付</van-button>
    <van-button size="large" type="default" class="cancel-order">取消订单</van-button>
    <van-button size="large" type="default" class="go-order" @click="() => { router.push({path: '/order'}) }">查看订单列表</van-button>
  </div>
</template>
<script setup>
import getSuccess from '@/assets/image/get_success.png'
import getFail from '@/assets/image/get_fail.png'
import getIng from '@/assets/image/get_ing.png'
import {orderInfo} from "@/api/index.js";

import {useRoute, useRouter} from 'vue-router'
import {onMounted, ref} from "vue";
import {showFailToast} from "vant";

const router = useRouter()
const route = useRoute()

const orderDetail = ref();

onMounted(() => {
  getOrderDetail();
})

const getOrderDetail = () => {
  orderInfo(route.query.order_no).then((res) => {
    if (res.code !== 0) {
      showFailToast(res.msg)
    } else {
      orderDetail.value = res.data
    }
  })
}

</script>

<style lang="scss" scoped>
.act-result-con {
  position: relative;
  margin-top: 80px;
  width: 100%;
  padding: 0 35px;
  box-sizing: border-box;
  background-color: #F6F6F6;

  .header {
    padding: 80px 0 56px;
    width: 100%;

    .result-img {
      width: 309px;
      height: 251px;
    }

    .get-success {
      margin-top: 30px;
      font-size: 38px;
      font-weight: bold;
      letter-spacing: .2rem;
      color: #333333;
    }
  }

  .go-pay {
    margin: 30px auto 0;
    width: 100%;
    height: 94px;
  }
  .cancel-order {
    margin: 30px auto 0;
    --van-button-default-border-color: #999;
  }
  .go-order {
    margin: 30px auto 0;
    --van-button-default-color: #F14131;
    --van-button-default-border-color: #F14131;
  }

}

.info-card {
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  width: 680px;
  min-height: 288px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

.table {
  width: 100%;
  font-size: 28px;
  color: #666666;

  .table-col {
    padding: 15px 0;
    display: flex;
    align-items: flex-start;
    line-height: 1.5em;
    justify-content: space-between;

    p {
      letter-spacing: .1em;
      color: #666666;
      font-size: 28px;
      font-weight: 500;
    }

    .flex-l {
      text-align: left;
      flex: 0 0 140px;
    }

    .info {
      color: #333333;
      word-break: break-word;
      word-wrap: break-word;
    }
  }
}
</style>
